<template>
  <div class="carousel-box">
    <heard />
    <div v-if="!isView" class="carousel-body">
      <el-carousel :interval="4000" :autoplay="false" type="card">
        <el-carousel-item v-for="item in list" :key="item.id" :indexs="item">
          <div class="item" @click="viewFun(item)">
            <div class="top-box">
              <img class="left-img" :src="getImageUrl(item.imgOne)">
              <div class="right-box">
                <div class="img-box">
                  <img :src="getImageUrl(item.imgTwo)">
                  <img :src="getImageUrl(item.imgThere)">
                </div>
                <div class="basic-box">
                  <div class="title">
                    <div />
                    <span>Basic Information</span>
                  </div>
                  <div class="nr">
                    {{ item.site }}
                  </div>
                </div>
              </div>
            </div>
            <div class="bottom-box">
              <span>About me</span>
              <div>{{ item.aboutMe }}</div>
              <div class="peidui" @click.stop="peiduiFun(item.imgOne)"/>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div v-else class="view-box">
      <div class="card-view">
        <div class="top">
          <div class="top-left">
            <img :src="getImageUrl(viewObj.imgOne)">
            <div class="basic-box">
              <div class="title">
                <div />
                <span>Basic Information</span>
              </div>
              <div class="nr">
                {{ viewObj.site }}
              </div>
            </div>
          </div>

          <div class="top-right">
            <img :src="getImageUrl(viewObj.imgTwo)">
            <img :src="getImageUrl(viewObj.imgThere)">
            <img :src="getImageUrl(viewObj.imgFour)">
            <img :src="getImageUrl(viewObj.imgFive)">
          </div>
        </div>
        <div class="bottom">
          <span>About me</span>
          <div>{{ viewObj.aboutMe }}</div>
        </div>
      </div>
      <div class="skills-btn" @click="peiduiFun(viewObj.imgOne)">
        Finish
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import useUserStore from "@/stores/modules/user.ts"

const UseUser = useUserStore()
const router = useRouter()
const isView = ref(false)
const viewObj = ref({} as List)
interface List {
  id: string
  imgOne: string
  imgTwo: string
  imgThere: string
  imgFour: string
  imgFive: string
  site: string
  aboutMe: string
}
const list = reactive<List[]>([
  {
    id: '1',
    imgOne: 's-1',
    imgTwo: 's-1-1',
    imgThere: 's-1-2',
    imgFour: 's-1-3',
    imgFive: 's-1-4',
    site: 'カン　ギイテイ',
    aboutMe: '想交一些中国朋友一起出去玩耍',
  },
  {
    id: '2',
    imgOne: 's-2',
    imgTwo: 's-2-1',
    imgThere: 's-2-2',
    imgFour: 's-2-3',
    imgFive: 's-2-4',
    site: 'カン　ギイテイ',
    aboutMe: '想交一些中国朋友一起出去玩耍',
  },
  {
    id: '3',
    imgOne: 's-3',
    imgTwo: 's-3-1',
    imgThere: 's-3-2',
    imgFour: 's-3-3',
    imgFive: 's-3-4',
    site: 'カン　ギイテイ',
    aboutMe: '想交一些中国朋友一起出去玩耍',
  },
])
function getImageUrl(img: string): string {
  return new URL(`/src/assets/pic/${img}.png`, import.meta.url).href
}
function viewFun(item: List) {
  isView.value = true
  viewObj.value = item
}
function peiduiFun(imgUrl:string) {
  UseUser.peiduiImg=imgUrl
  router.push('/peidui')
}
</script>

<style lang="scss" scoped>
::v-deep.carousel-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #5598F8;

  .view-box {
    height: calc(100% - 70px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    .card-view {
      width: 1194px;
      height: 750px;
      background: #FFFFFF;
      border-radius: 40px;
      box-shadow: 3px -5px 40px 1px rgba(205, 205, 212, 0.1);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 30px 40px;
      box-sizing: border-box;

      .top {
        display: flex;
        justify-content: space-between;

        .top-left {
          width: 274px;
          height: 350px;
          position: relative;

          &>img {
            width: 100%;
            height: 100%;
          }

          .basic-box {
            position: absolute;
            bottom: -127px;
            left: 0;
            width: 370px;
            height: 97px;
            background-color: #FFFFFF;
            box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.12);
            display: flex;
            flex-direction: column;
            padding: 20px;
            box-sizing: border-box;

            .title {
              display: flex;
              align-items: center;

              &>div {
                width: 34px;
                height: 31px;
                background: url("@/assets/pic/icons.png") no-repeat;
                background-size: 100% 100%;
                margin-right: 15px;
              }

              &>span {
                color: #988DA2;
                font-size: 20px;
              }
            }

            .nr {
              margin-top: 10px;
              margin-left: 34px;
              color: #221232;
              font-size: 20px;
            }
          }
        }

        .top-right {
          display: grid;
          grid-template-rows: repeat(2, 227px);
          grid-template-columns: repeat(2, 227px);
          gap: 20px;

          &>img {
            width: 100%;
            height: 100%;
          }
        }
      }

      .bottom {
        margin-top: 40px;
        width: 100%;
        flex: 1;
        background-color: rgba(233, 241, 252, 0.44);
        padding: 25px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        &>span {
          color: #988DA2;
          font-size: 20px;
        }

        &>div {
          color: #241434;
          font-size: 16px;
        }
      }
    }
  }

  .carousel-body {
    height: calc(100% - 70px);
  }

  .el-carousel__mask {
    background-color: #a29f9f;
    opacity: 0.5;
  }
  .el-carousel__item--card.is-in-stage:hover .el-carousel__mask{
    opacity: 0.5;
  }
  .item {
    padding: 50px 60px 20px 60px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;

    .top-box {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .left-img {
        width: 245px;
        height: 359px;
      }

      .right-box {
        margin-left: 150px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .img-box {
          display: flex;
          justify-content: space-between;

          &>img {
            width: 174px;
            height: 204px;
          }
        }

        .basic-box {
          width: 100%;
          height: 113px;
          background-color: #FFFFFF;
          box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.12);
          display: flex;
          flex-direction: column;
          padding: 20px;
          box-sizing: border-box;

          .title {
            display: flex;
            align-items: center;

            &>div {
              width: 34px;
              height: 31px;
              background: url("@/assets/pic/icons.png") no-repeat;
              background-size: 100% 100%;
              margin-right: 15px;
            }

            &>span {
              color: #988DA2;
              font-size: 20px;
            }
          }

          .nr {
            margin-top: 10px;
            margin-left: 34px;
            color: #221232;
            font-size: 20px;
          }
        }
      }
    }

    .bottom-box {
      margin-top: -50px;
      width: 725px;
      height: 173px;
      background-color: rgba(233, 241, 252, 0.44);
      padding: 25px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      position: relative;

      .peidui {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 124px;
        height: 124px;
        background: url("@/assets/pic/unpeidui.png") no-repeat;
        background-size: 100% 100%;
        transition: transform 0.3s ease;
      }

      .peidui:hover {
        background: url("@/assets/pic/peidui.png") no-repeat !important;
        background-size: 100% 100% !important;
        transform: scale(1.2);
        cursor: pointer;
      }

      &>span {
        color: #988DA2;
        font-size: 20px;
      }

      &>div {
        color: #241434;
        font-size: 16px;
      }
    }
  }

  .el-carousel {
    height: 100%;
    margin-top: 90px;

    .el-carousel__container {
      height: 80%;
      // .el-carousel__item:nth-child(2n) {
      //   background-color: #99a9bf;
      // }

      // .el-carousel__item:nth-child(2n + 1) {
      //   background-color: #1f62ad;
      // }

      .is-active {
        background: #FFFFFF;
        opacity: 1;
      }
    }

  }
}
</style>
